<template>
  <div id="app">
    <router-view class="container" style="padding-bottom:50px;"/>
    <div class="nav">
      <ul>
        <!-- 
          router-link 实现页面跳转，必填to属性，to对应需要跳转到的路由，需要在路由代码文件中配置在做路由跳转的时候
          可以传递参数
          name     路由名字(建议在跳转的时候使用)
          path     路径
          query    查询条件(url传参)
          params    查询参数(需要在路由中做配置)
         -->
        <li @click="selected=0" :class="{active: selected==0}">
          <router-link :to="{ name: 'Home'}">
          <i class="fa icon fa-home"></i>
          首页</router-link></li>
        <li @click="selected=1" :class="{active: selected==1}">
          <router-link :to="{ name: 'List'}">
          <i class="fa fa-bars icon"></i>
          列表</router-link></li>
        <li @click="selected=2" :class="{active: selected==2}">
          <router-link :to="{ name: 'News'}">
          <i class="fa fa-bath icon"></i>
          资讯</router-link></li>
        <li @click="selected=3" :class="{active: selected==3}">
          <router-link :to="{ name: 'About'}">
          <i class="fa fa-free-code-camp icon"></i>
          关于</router-link></li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {
      selected: 0,
    };
  },
};
</script>

<style>
.nav{
  width: 100%;
  position: fixed;
  bottom: 0;
}
.nav ul{
  width: 100%;
  padding: 0;
  margin: 0;
}
.nav ul .active{
  background-color: lightcoral;
}
.nav ul li{
  list-style: none;
  width: 25%;
  height: 100%;
  float: left;
  background-color: black;
}
.nav ul li a{
  width: 100%;
  display: inline-block;
  text-align: center;
}
.nav .icon{
  font-size: 2rem;
  display: block;
}
</style>
